<template>
    <div class="dzs-header-btn-box" :class="labelPosition">
        <slot name="left"></slot>
        <div  v-if="myRules.length">
            <dzs-button v-if="getRules('add')" type="primary" :icon="Plus" @click="exportMethod('add')">添加</dzs-button>
            <el-popover v-if="getRules('import')" placement="bottom" width="400" trigger="click">
                <dzs-upload-file :action="action" @change="changeFile" :fileType="['xls', 'xlsx']"></dzs-upload-file>
                <template #reference>
                    <dzs-button type="primary" :icon="Upload">导入</dzs-button>
                </template>
            </el-popover>

            <dzs-button v-if="getRules('delete')" type="danger" :icon="Delete" :disabled="isBatchDelete"
                @click="batchDelete">删除全部</dzs-button>
            <dzs-button v-if="getRules('export')" type="primary" :icon="Download" @click="exportMethod('export')">
                导出
            </dzs-button>
            <el-dropdown v-if="getRules(['export-all', 'export-current', 'export-select'])">
                <dzs-button type="primary">
                    <span class="export-text">导出</span>
                    <el-icon>
                        <ArrowDown />
                    </el-icon>
                </dzs-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="exportMethod('exportAll')">导出全部</el-dropdown-item>
                        <el-dropdown-item @click="exportMethod('exportCurrent')">导出当前页</el-dropdown-item>
                        <el-dropdown-item @click="exportMethod('exportSelect')">导出选中</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <slot></slot>
        <slot name="right"></slot>
    </div>

</template>
<script setup lang="ts">
/**
 * 后台通用操作按钮
 * @author zs.duan
 * @date 2024-07-30
 * @param {String} label-position 按钮位置 left|right|center
 * @param {Array} rules 按钮权限 add|import|export|export-all|export-current|export-select|delete
 * @param {Boolean} isBatchDelete 是否禁用批量删除
 * @param {String} action 上传地址
 * 
 * @event {Function} @changeFile 文件上传
 * @event {Function} @btnClick 按钮点击事件
 * @event {Function} @add 新增事件
 * @event {Function} @export 导出事件
 * @event {Function} @exportAll 导出全部事件
 * @event {Function} @exportCurrent 导出当前页面事件
 * @event {Function} @exportSelect 导出选中事件
 * @event {Function} @batchDelete 批量删除事件
 * 
 * @solt {slot} 默认插槽
 * */

import { computed } from "vue";
import type { rule, emitMethods } from "./@types/index";
import { ElMessageBox } from 'element-plus';
import { Plus, Delete, Download, ArrowDown, Upload } from '@element-plus/icons-vue'
import dzsUploadFile from "../dzs-upload-file"
const props = defineProps({
    labelPosition: {
        type: String,
        default: "right"
    },
    rules: {
        type: Array<rule>,
        default: () => {
            return ['add', 'export', 'export-all', 'export-current', 'export-select', 'delete', 'import']
        }
    },
    isBatchDelete: {
        type: Boolean,
        default: false
    },
    action: {
        type: String,
        default: ""
    }
})

const myRules = computed(() => {
    return props.rules
})

const emit = defineEmits(['changeFile', 'change-file', 'btnClick', 'add', 'export', 'exportAll', 'exportCurrent', 'exportSelect', 'batchDelete', 'batch-delete'])

/**获取权限*/
const getRules = (name: rule | Array<rule>) => {
    if (Array.isArray(name)) {
        return name.some((item) => {
            return myRules.value.includes(item)
        })
    }
    return myRules.value.includes(name)
}


/**文件上传*/
const changeFile = (fileList: Array<any>) => {
    emit('change-file', fileList);
    emit('changeFile', fileList)
}

/**批量删除*/
const batchDelete = () => {
    ElMessageBox.confirm('是否要删除这些内容?', '确认删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    }
    ).then(() => {
        exportMethod('batchDelete')
        exportMethod('batch-delete')
    })
}
/**
 * 导出方法
 * @param {String} MethodName 导出方法名
 * */
const exportMethod = (MethodName: emitMethods) => {
    emit(MethodName);
    emit("btnClick", MethodName)
}
</script>
<style scoped lang="scss">
.dzs-header-btn-box {
    display: flex;
    margin-left: 0;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .dzs-button {
        margin-top: 10px;

        &:focus-visible {
            outline: none;
        }
    }

    .export-text {
        display: inline-block;
        margin-right: 5px;
    }

    &.left {
        justify-content: flex-start;
    }

    &.center {
        justify-content: center;
    }

    &.right {
        justify-content: flex-end;
    }

    .el-dropdown {
        margin-left: 10px;
    }
}

@media screen and (max-width: 768px) {
    .dzs-header-btn-box {
        .dzs-button {
            margin-top: 10px;
        }
    }
}
</style>